<template>
	<!-- 禁止点击筛选界面后,页面滚动,需要在组件的open和close改动 :class="{'bind':pageSc}" -->
	<view :class="{'bind':pageSc}">
		<view class="ahdhdhfjh">
			<!-- 搜索框 -->
			<view class="search-bar">
				<uni-search-bar radius="100" placeholder="请输入搜索内容" v-model="param.searchValue" clearButton="none"
					cancelButton="none" @confirm="search" @focus="foucs" />
			</view>
			<!-- 点击筛选按钮 -->
			<!-- 禁止点击筛选界面后,页面滚动,需要在组件的open和close改动 @pageScFn="pageScFn" -->
			<materialsModule ref="materialsModule" :menuList="menuList" @pageScFn="pageScFn">
				<siftsuBassembly v-model="filterValue" dropdownKey="filter" :options="filterOptions" type="column"
					@success="success"></siftsuBassembly>
			</materialsModule>
			<!-- 选中的条件渲染到页面上 -->
			<view class="showFilter" v-if="filterOptions[0].default.length || filterOptions[1].default.length">
				<view class="flexFilter">
					<view class="defaultClass" v-for="(item,index) in filterOptions" :key="index"
						v-if="item.default.length != 0 ">
						<block v-for="(id,idx) in item.default" :key="idx">
							<text class="showText">
								<text v-if="idx>=1" style="padding-right: 10rpx;">/</text>{{id}}
							</text>
						</block>
					</view>
				</view>
			</view>
		</view>
		<!-- 分类品牌材料列表 -->
		<view class="project_list">
			<view class="project_box" v-for="(item, index) in getList" :key="index" @click="materialDetail(item)">
				<view class="list_top">
					<view class="list_left">
						<image src="http://106.14.56.171:15016/images/pase.png" />
						<view>
							<text>{{ item.materialName }}</text>
						</view>
					</view>
					<view class="list_right">
						<image src="http://106.14.56.171:15016/images/u3063.png"></image>
					</view>
				</view>
				<view class="list_base">
					<view class="base_left">
						<fileImage :src="item.coverUrl" :className="['cidental']" />
						</image>
					</view>
					<view class="base_right">
						<view class="one">
							<text class="base_right_text">分类</text>
							<text style="color: #333;">{{ item.materialType || '暂无数据' }}</text>
						</view>
						<view class="two">
							<text class="base_right_text">品牌</text>
							<text class="baswe_text">{{ item.materialBrand || '暂无数据' }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import materialsModule from '@/components/fy-dropdown/materialsmodule.vue';
	import siftsuBassembly from '@/components/fy-dropdown-item/siftsubassembly.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import fileImage from '@/components/fileImage/fileImage.vue'
	import {
		debounce,
		showLoading
	} from '@/config/debounce.js'
	export default {
		components: {
			materialsModule,
			siftsuBassembly,
			fileImage
		},
		data() {
			return {
				pageSc: false, //禁止点击筛选界面后,页面滚动,需要在组件的open和close改动
				menuList: [{
					title: '筛选',
					dropdownKey: 'filter'
				}],
				// 获取材料列表
				param: {
					searchValue: '',
					pageNo: 1,
					pageSize: 10,
					typeList: [],
					brandList: []
				},
				filterValue: '',
				filterOptions: [{
						title: '材料类型',
						key: 'Type',
						default: [],
						defaultReset: [],
						list: []
					},
					{
						title: '品牌',
						key: 'Status',
						default: [],
						defaultReset: [],
						// 品牌下拉循环
						list: []
					}
				],
				getList: [],
				limitLoad: false, // 防止重复加载
				isHasNextPages: false,
				more: false
			};
		},
		onLoad: function(options) {
			console.log('搜索条件1', options);
			this.param.searchValue = options.searchValue
			// 接收从服务传过的类型值
			if (options.type) {
				this.param.typeList.push(options.type);
				this.getDrown(options.type); //点击筛选下拉（获取材料类型）
			} else {
				this.getDrown(); //点击筛选下拉（获取材料类型）
			}
			this.fetchMaterialList(); //获取材料列表
		},

		// 下拉刷新
		onPullDownRefresh() {
			this.ifBottomRefresh = true;
			this.fetchMaterialList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 触底加载
		onReachBottom() {
			if (this.isHasNextPages == true) {
				this.param.pageNo += 1;
				this.fetchMaterialList(true); //触底加载材料列表
			}
		},
		methods: {
			// 禁止点击筛选界面后,页面滚动,需要在组件的open和close改动pageScFn
			pageScFn(b) {
				this.pageSc = b
			},
			// 点击进入材料详情页面 传ID
			materialDetail(item) {
				uni.navigateTo({
					url: './materialdetail?id=' + item.materialId,
				});
			},
			// 材料列表fetchMaterialList
			fetchMaterialList: debounce(function(a) {
				if (this.limitLoad) return
				this.limitLoad = true
				showLoading({
					mask: true,
				})
				var data = {
					...this.param
				};
				this.$http.post('api/Materials/GetMaterialsList', data).then(res => {
					this.limitLoad = false
					uni.hideLoading()
					let index = res.items.length;
					this.isHasNextPages = res.hasNextPages
					if (a) {
						this.getList = [...this.getList, ...res.items];
						return;
					}
					this.getList = res.items;
				}).catch(err => {
					uni.hideLoading()
					this.limitLoad = false
				})
			}, 300),
			// 渲染筛选下拉(获取材料类型)
			// type 类型
			// status 品牌
			getDrown(type, status) {
				this.$http.get('api/Materials/GetMaterialTypes').then(res => {
					// console.log('筛选', res);
					this.filterOptions.forEach(el => {
						if (el.key == 'Type') {
							res.map(item => {
								let obj = {
									value: item.valueCode,
									text: item.valueName
								};
								// 从服务传过的
								if (el.key == 'Type' && obj.value == type) {
									el.default.push(obj.value);
								}
								el.list.push(obj);
							});
						}
					});
				});
				// 渲染筛选下拉(获取品牌)
				this.$http.get('api/Materials/GetMaterialBrands').then(res => {
					this.filterOptions.forEach(el => {
						if (el.key == 'Status') {
							res.map(item => {
								let obj = {
									value: item.valueCode,
									text: item.valueName
								};
								el.list.push(obj);
							});
						}
					});
				});
			},
			// 失去焦点搜索材料列表里面的内容
			search: debounce(function(e, brandList = [], typeList = []) {
				// console.log(this.param);
				this.param.brandList = brandList;
				this.param.typeList = typeList;
				this.param.pageNo = 1;
				let data = {
					...this.param
				};
				if (e.value) {
					data.searchValue = e.value;
				}
				this.$http.post('api/Materials/GetMaterialsList', data).then(res => {
					this.limitLoad = false
					uni.hideLoading()
					this.getList = res.items;
				}).catch(err => {
					uni.hideLoading()
					this.limitLoad = false
				})
			}, 300),
			// 点击筛选里面的选项,点击确定出材料列表里面的内容
			success(e) {
				if (e.cancel) return;
				this.filterOptions.forEach(item => {
					item.default = e.data[item.key];
				});
				this.search({}, e.data.Status, e.data.Type);
			},
			foucs() {
				//点开筛选界面后，不做任何选择，然后在搜索栏填写搜索条件后点击搜索，筛选界面应该关闭
				this.$refs.materialsModule.close();
			}
		}
	};
</script>

<style lang="less" scoped>
	.bind {
		height: calc(100vh - 78rpx);
		overflow: hidden;
	}

	.search-bar {
		height: 130rpx;
		background-color: #ffffff;
		// background-color: aqua;
	}

	.progressl {
		width: 96%;
	}

	.ahdhdhfjh {
		position: sticky;
		top: 0;
		width: 100%;
		padding: 0 0 5rpx 0;
		background-color: #f6f6f6;
		z-index: 99;
	}

	// 选中的条件渲染到页面上
	.showFilter {
		width: 100%;
		margin: auto;
		z-index: 999;
		background-color: #F6F6F6;
	}

	.showFilter::-webkit-scrollbar {
		display: none;
	}

	// 主父元素
	.flexFilter {
		display: flex;
		width: 700rpx;
		overflow: auto;
	}

	.flexFilter::-webkit-scrollbar {
		display: none;
	}

	.showText {
		width: 100rpx;
		height: 30rpx;
		text-align: center;
		color: #B6001F;
		background-color: rgb(246, 246, 246);
		border-radius: 13px;
		font-size: 12px;
	}

	.defaultClass {
		text-align: center;
		width: 30%;
		border: 1px solid #B6001F;
		border-radius: 13px;
		margin-left: 13px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: center;
		line-height: 30rpx;
		padding: 0 10rpx 0 10rpx;
	}

	// -------------------------------------------
	.project_list {
		margin-top: -14rpx;
		width: 100%;
		// background-color: darkgoldenrod;

		>view {
			margin-top: 20rpx;
		}
	}

	.project_box {
		width: 96%;
		height: 240rpx;
		border-radius: 24rpx;
		background-color: #FFFFFF;
		// background-color: pink;
		margin: auto;

	}

	.list_top {
		padding: 25rpx 0 0 0;
		width: 100%;
		// background-color: palegoldenrod;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

	}

	.list_left {
		padding-left: 4%;
		display: flex;
		justify-content: space-around;

		>image {
			float: left;
			margin-top: 8rpx;
			margin-right: 15rpx;
			width: 36rpx;
			height: 36rpx;
		}

		>view {
			width: 530rpx;
			table-layout: fixed;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;

			>text {
				box-shadow: none;
				font-family: '微软雅黑 Bold', '微软雅黑';
				font-weight: 700;
				font-style: normal;
				font-size: 30rpx;
			}

		}
	}

	.list_right {
		padding-right: 4%;

		/* background-color: palegreen; */
		>image {
			margin-left: 15rpx;
			width: 10rpx;
			height: 20rpx;
		}
	}

	.list_base {
		margin-top: 28rpx;
		height: 120rpx;
		// background-color: brown;
		display: flex;
		flex-direction: row;

		.base_left {
			width: 20%;
			margin-left: 4%;
			// background-color: aqua;
		}

		.base_right {
			width: 80%;
			// background-color: aquamarine;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
	}

	.base_right view {
		box-shadow: none;
		font-family: 'Arial', 'Times New Roman', 'Microsoft YaHei', SimHei;
		height: 45rpx;
		line-height: 50rpx;
	}

	.list_base .base_left>image {
		width: 116rpx;
		height: 116rpx;
	}

	.list_base .base_right .base_right_text {
		font-size: 26rpx;
		color: #A6A6A6;
		margin-right: 2%;
	}

	.baswe_text {
		font-weight: 400;
		color: #333;
	}

	// 显示更多
	.list_base .base_right text {
		font-size: 26rpx;
		color: #333;
	}

	.list_left .textName {
		/* 不能加绝对定位,会影响到position: fixed; 使用,在真机调试当中,它的层级的最高 */
		width: 452rpx !important;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.activestyle {
		color: #454545;
		background-color: #F6F6F6;
	}

	/deep/ .uni-searchbar__box {
		border: 1px solid #EFEFEF;
	}
</style>
<style lang="scss">
	.cidental {
		width: 128rpx;
		height: 128rpx;
		border-radius: 7px;
	}
</style>